<template>
    <!-- 物料选择器 -->
    <div v-if="multiple">
        <z-action ref="action" icon="search" size="small" label="选择物料" width="840px" :beforeSubmit="submit">
            <z-table v-model="selected" url="/do/select/material" :size="10" :columns="showColumns" :params="params">
            </z-table>
        </z-action>
        <div class="selected">
            <z-table :datasource="result" :columns="columns" :actionWidth="50">
                <template #number="{ row }">
                    <el-input v-model="row.number" type="number" />
                </template>
                <template #action$="{ row }">
                    <el-button type="primary" link @click="delect(row)">删除</el-button>
                </template>
            </z-table>
        </div>
    </div>
    <z-action v-else ref="action" icon="search" link :label="label" width="840px">
        <z-table v-if="isContract === false" url="/do/select/material" :size="10" :columns="showColumns"
            :actionWidth="80" :params="params">
            <template #action$="{ row }">
                <el-button type="primary" link @click="select(row)">选择</el-button>
            </template>
        </z-table>
        <z-table v-else url="/do/join/material" :size="10" :columns="showColumns" :actionWidth="80" :params="params">
            <template #action$="{ row }">
                <el-button type="primary" link @click="select(row)">选择</el-button>
            </template>
        </z-table>
    </z-action>
</template>

<script>

export default {
    inheritAttrs: false,
    provide() {
        return {
            configs: {},
        }
    },
    props: {
        isContract: {
            type: Boolean,
            default: false
        },
        modelValue: Array,
        params: Object,
        formData: Object,
        fields: Array,
        multiple: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            selected: [],
            result: this.modelValue || [],
            label: "选择物料",
            showColumns: [
                { label: "物料名称", name: "title" },
                { label: "规格型号", name: "sku" },
                { label: "计量单位", name: "unit", code: "cfg_cfgMaterialUnit" },
                { label: "税率", name: "rate" },
                { label: "含税单价", name: "gstInclusive", type: "money" },
            ],
            field: [
                { label: "数量", name: "number", type: "number" },
            ],
            columns: [
                { label: "物料名称", name: "title" },
                { label: "规格型号", name: "sku" },
                { label: "计量单位", name: "unit", code: "cfg_cfgMaterialUnit" },
                { label: "税率", name: "rate" },
                { label: "含税单价", name: "gstInclusive", type: "money" },
                { label: "数量", name: "number", type: "number" },
            ],
        };
    },
    methods: {
        delect(row) {
            this.result = this.result.filter(item => item.id !== row.id);
            this.$emit('update:modelValue', this.result);
        },
        submit() {
            if (this.selected.length === 0) {
                this.$refs['action'].close();
                return
            }
            // 创建现有物料的映射
            const existingItemsMap = {};
            this.result.forEach(item => {
                existingItemsMap[item.id] = item;
            });
            // 处理新选择的物料
            const newResults = [...this.result];
            const newItems = [];
            this.selected.forEach(item => {
                if (!existingItemsMap[item.id]) {
                    // 添加新物料
                    newItems.push({
                        id: item.id,
                        title: item.title,
                        sku: item.sku,
                        unit: item.unit,
                        rate: item?.rate || 0,
                        gstInclusive: item.gstInclusive,
                        number: item.number || 0
                    });
                }
            });
            // 添加新物料到结果集
            if (newItems.length > 0) {
                newResults.push(...newItems);
            }

            // 更新结果
            this.result = newResults;
            this.$emit('update:modelValue', this.result);
            this.$refs['action'].close();
            this.selected = []; // 清空临时选择
        },
        select(row) {
            this.label = row.title
            this.$emit('update:modelValue', row.id)
            return this.$refs['action'].close()
        },
    },
};
</script>
<style lang="scss">
.selected {
    margin-bottom: 5px;
    width: 900px;
}
</style>
